<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试鼠标滚轮滚动事件Andy_testing mousewheel plugin</title>
        <script type="text/javascript" src="../popjs/jquery.1.8.3.min.js"></script>
        <script type="text/javascript" src="../popjs/jquery.mousewheel.js"></script>

        <style>
            #Andy_test1 {
                background-color: #000;
                width: 120px;
                height: 100px;
                color: #fff;
                float: left;
            }

            #Andy_test2 {
                background-color: #333;
                width: 120px;
                height: 100px;
                color: #fff;
                float: left;
            }

            #Andy_test3 {
                background-color: #666;
                width: 120px;
                height: 100px;
                color: #fff;
                float: left;
            }

            #Andy_test4 {
                background-color: #000;
                width: 120px;
                height: 100px;
                color: #fff;
                float: left;
            }

            #Andy_test5 {
                background-color: #333;
                padding: 5px;
                width: 400px;
                height: 400px;
                color: #fff;
                float: left;
            }

            #Andy_test6 {
                background-color: #666;
                padding: 5px;
                width: 250px;
                height: 250px;
                color: #fff;
                float: left;
            }

            #Andy_test7 {
                background-color: #000;
                padding: 5px;
                width: 100px;
                height: 100px;
                color: #fff;
                float: left;
            }

            #forceScroll {
                clear: both;
                height: 1000px;
            }

            #logger {
                position: absolute;
                top: 565px;
                left: 12px;
                width: 460px;
                height: 290px;
                overflow: auto;
            }

            #logger p {
                font-family: Arial, sans-serif;
                font-size: 13px;
                padding: 2px;
                border-bottom: 1px solid #ccc;
                margin: 0;
            }

            #logger p:nth-child(even) {
                background-color: #FFFFE8;
            }

            #logger p:nth-child(10n) {
                border-bottom-color: #000;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $('#userAgent').html(navigator.userAgent);


                $('#Andy_test1')
                    .mousewheel(function (event, delta, deltaX, deltaY) {
                        var o = '';
                        if (delta > 0)
                            o = '#Andy_test1: up (' + delta + ')';
                        else if (delta < 0)
                            o = '#Andy_test1: down (' + delta + ')';

                        if (deltaX > 0)
                            o = o + ', east (' + deltaX + ')';
                        else if (deltaX < 0)
                            o = o + ', west (' + deltaX + ')';

                        if (deltaY > 0)
                            o = o + ', north (' + deltaY + ')';
                        else if (deltaY < 0)
                            o = o + ', south (' + deltaY + ')';

                        if (o != '')
                            log(o);

                        log('pageX: ' + event.pageX + ' pageY: ' + event.pageY);
                    });

                $('#Andy_test2')
                    .mousewheel(function (event, delta, deltaX, deltaY) {
                        var o = '';
                        if (delta > 0)
                            o = '#Andy_test2: up (' + delta + ')';
                        else if (delta < 0)
                            o = '#Andy_test2: down (' + delta + ')';

                        if (deltaX > 0)
                            o = o + ', east (' + deltaX + ')';
                        else if (deltaX < 0)
                            o = o + ', west (' + deltaX + ')';

                        if (deltaY > 0)
                            o = o + ', north (' + deltaY + ')';
                        else if (deltaY < 0)
                            o = o + ', south (' + deltaY + ')';

                        if (o != '')
                            log(o);
                        return false; // prevent default
                    });

                $('#Andy_test3')
                    .hover(function () { log('#Andy_test3: mouseover'); }, function () { log('#Andy_test3: mouseout'); })
                    .mousewheel(function (event, delta, deltaX, deltaY) {
                        log('#Andy_test3: I should not have been logged');
                    })
                    .unmousewheel();

                var Andy_testRemoval = function (event, delta, deltaX, deltaY) {
                    log('#Andy_test4: I should not have been logged');
                };

                $('#Andy_test4')
                    .mousewheel(function (event, delta, deltaX, deltaY) {
                        var o = '';
                        if (delta > 0)
                            o = '#Andy_test4: up (' + delta + ')';
                        else if (delta < 0)
                            o = '#Andy_test4: down (' + delta + ')';

                        if (deltaX > 0)
                            o = o + ', east (' + deltaX + ')';
                        else if (deltaX < 0)
                            o = o + ', west (' + deltaX + ')';

                        if (deltaY > 0)
                            o = o + ', north (' + deltaY + ')';
                        else if (deltaY < 0)
                            o = o + ', south (' + deltaY + ')';

                        if (o != '')
                            log(o);
                        return false;
                    })
                    .mousewheel(Andy_testRemoval)
                    .mousewheel(function (event, delta, deltaX, deltaY) {
                        var o = '';
                        if (delta > 0)
                            o = '#Andy_test4: up (' + delta + ')';
                        else if (delta < 0)
                            o = '#Andy_test4: down (' + delta + ')';

                        if (deltaX > 0)
                            o = o + ', east (' + deltaX + ')';
                        else if (deltaX < 0)
                            o = o + ', west (' + deltaX + ')';

                        if (deltaY > 0)
                            o = o + ', north (' + deltaY + ')';
                        else if (deltaY < 0)
                            o = o + ', south (' + deltaY + ')';

                        if (o != '')
                            log(o + ' from 2nd handler');
                        return false;
                    })
                    .unmousewheel(Andy_testRemoval);

                $('#Andy_test5')
                    .mousewheel(function (event, delta, deltaX, deltaY) {
                        var o = '';
                        if (delta > 0)
                            o = '#Andy_test5: up (' + delta + ')';
                        else if (delta < 0)
                            o = '#Andy_test5: down (' + delta + ')';

                        if (deltaX > 0)
                            o = o + ', east (' + deltaX + ')';
                        else if (deltaX < 0)
                            o = o + ', west (' + deltaX + ')';

                        if (deltaY > 0)
                            o = o + ', north (' + deltaY + ')';
                        else if (deltaY < 0)
                            o = o + ', south (' + deltaY + ')';

                        if (o != '')
                            log(o);

                        event.stopPropagation();
                        event.preventDefault();
                    });

                $('#Andy_test6')
                    .mousewheel(function (event, delta, deltaX, deltaY) {
                        var o = '';
                        if (delta > 0)
                            o = '#Andy_test6: up (' + delta + ')';
                        else if (delta < 0)
                            o = '#Andy_test6: down (' + delta + ')';

                        if (deltaX > 0)
                            o = o + ', east (' + deltaX + ')';
                        else if (deltaX < 0)
                            o = o + ', west (' + deltaX + ')';

                        if (deltaY > 0)
                            o = o + ', north (' + deltaY + ')';
                        else if (deltaY < 0)
                            o = o + ', south (' + deltaY + ')';

                        if (o != '')
                            log(o);

                        event.stopPropagation();
                        event.preventDefault();
                    });

                $('#Andy_test7')
                    .mousewheel(function (event, delta, deltaX, deltaY) {
                        var o = '';
                        if (delta > 0)
                            o = '#Andy_test7: up (' + delta + ')';
                        else if (delta < 0)
                            o = '#Andy_test7: down (' + delta + ')';

                        if (deltaX > 0)
                            o = o + ', east (' + deltaX + ')';
                        else if (deltaX < 0)
                            o = o + ', west (' + deltaX + ')';

                        if (deltaY > 0)
                            o = o + ', north (' + deltaY + ')';
                        else if (deltaY < 0)
                            o = o + ', south (' + deltaY + ')';

                        if (o != '')
                            log(o);

                        event.preventDefault();
                    });

                function log(msg) {
                    $('#logger').append('<p>' + msg + '</p>').scrollTop(999999);
                };
            });
        </script>
    </head>
    <body>
        <h1 id="banner">jQuery mousewheel.js - 测试鼠标滚轮滚动事件</h1>
        <h2 id="userAgent"></h2>
        <div>把光标移动到各个div上面，滚动滚轮，看看效果。支持IE8以上，Chrome等浏览器。
        <br /><br /></div>
        <ul>
            <li><strong>Andy_test1</strong> is just using the plain on mousewheel() with a function passed in and does not prevent default. (Also logs the value of pageX and pageY event properties.)</li>
            <li><strong>Andy_test2</strong> should prevent the default action.</li>
            <li><strong>Andy_test3</strong> should only log a mouseover and mouseout event. Andy_testing unmousewheel().</li>
            <li><strong>Andy_test4</strong> has two handlers.</li>
            <li><strong>Andy_test5</strong> is like Andy_test2 but has children. The children should not scroll until mousing over them.</li>
            <li><strong>Andy_test6</strong> is like Andy_test5 but should not scroll children or parents.</li>
            <li><strong>Andy_test7</strong> is like Andy_test6 but has no children. It will propagate the event and scroll Andy_test 6 as well.</li>
        </ul>


        <div id="Andy_test1"><p>Andy_test1</p></div>
        <div id="Andy_test2"><p>Andy_test2</p></div>
        <div id="Andy_test3"><p>Andy_test3</p></div>
        <div id="Andy_test4"><p>Andy_test4</p></div>
        <div id="Andy_test5">
            <p>Andy_test5</p>
            <div id="Andy_test6">
                <p>Andy_test6</p>
                <div id="Andy_test7"><p>Andy_test7</p></div>
            </div>
        </div>

        <div id="logger"></div>

        <div id="forceScroll"></div>
    </body>
</html>
